<template>
  <div>
    <ul>
      <li>
        <p>名字：{{msg.uname}}</p>
        <p>姓：{{msg.famliyName}}</p>
        <p>年龄：{{msg.age}}</p>
        <p>职业：{{msg.profess}}</p>
        <p><button @click="addPull">点击年龄加一</button></p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    props:['msg'],
    data(){
      return{

      }
    },
    methods:{
      addPull(){
        this.$emit('addPull', this.msg.id,1);
      }
    }

}
</script>

<style scoped lang="less">
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
    li{
      list-style: none;
      width: 300px;
      height: 150px;
      color: #fff;
      border: 2px solid lawngreen;
      background-color: #087;
      display: flex;
      flex-direction:column;
      align-content: space-between;
      justify-content:space-evenly ;
      &:hover{
        background-color: pink;
        color: #000;
      }
    }
</style>
